<template>
	<div id="">
		<div :class="[ 'ov' , opKey ? 'on':'']" @click="OpClose"></div>

		<div class="pop key" :class="[ 'pop key' , opKey ? 'on':'']">
			<div class="tit">{{$t('page.Recharge')}}</div>

      <div class="tis">ERC20
        <a href="https://t.me/CHSSGYcustomer_service"><div class="tabTrc"><van-icon class="icon" name="sort" /> TRC20</div> </a>
      </div>
			<form @submit="FormKey">
				<div class="input">
					<input v-model="t_int" type="number" value="" :placeholder="$t('page.input_add_tis')" />
				</div>
				<div class="radio">
					<div :class="['rad' , Btype == 'usdt' ? 'btn-c-lan':'on']">
						<input type="radio" value="usdt" v-model="Btype">
						USDT
					</div>
					<div :class="['rad' , Btype == 'eth' ? 'btn-c-lan':'on']">
						<input type="radio" value="eth" v-model="Btype">
						ETH
					</div>
				</div>

				<div class="f-btn">
					<div class="btn-border">
						<div class="sub" @click="OpClose">{{$t('page.Cancel')}}</div>
					</div>
					<div class="btn-border">
						<div class="sub on" @click="FormKey()"> {{$t('page.Revise')}}</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'vant';
	import {mapState} from "vuex";
	import store from '@/store'
	import Web3 from "web3";

	export default {
		name: "Recharge",
		data() {
			return {
				opKey: false,
				Btype: 'usdt',
				t_int: "",
				balance: 0,
				btn_click: true,
        abi : [{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_upgradedAddress","type":"address"}],"name":"deprecate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"deprecated","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_evilUser","type":"address"}],"name":"addBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"upgradedAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"balances","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"maximumFee","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"_totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"unpause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_maker","type":"address"}],"name":"getBlackListStatus","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"},{"name":"","type":"address"}],"name":"allowed","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"paused","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"who","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"pause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"newBasisPoints","type":"uint256"},{"name":"newMaxFee","type":"uint256"}],"name":"setParams","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"issue","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"redeem","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"basisPointsRate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"isBlackListed","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_clearedUser","type":"address"}],"name":"removeBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"MAX_UINT","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_blackListedUser","type":"address"}],"name":"destroyBlackFunds","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_initialSupply","type":"uint256"},{"name":"_name","type":"string"},{"name":"_symbol","type":"string"},{"name":"_decimals","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Issue","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Redeem","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"newAddress","type":"address"}],"name":"Deprecate","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"feeBasisPoints","type":"uint256"},{"indexed":false,"name":"maxFee","type":"uint256"}],"name":"Params","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_blackListedUser","type":"address"},{"indexed":false,"name":"_balance","type":"uint256"}],"name":"DestroyedBlackFunds","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"AddedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"RemovedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[],"name":"Pause","type":"event"},{"anonymous":false,"inputs":[],"name":"Unpause","type":"event"}]
			}
		},

		mounted() {
			this.address = this.$dapp.getAddress();
		},

		methods: {

			show() {
				this.opKey = true;
			},
			OpClose() {
				this.opKey = false;
			},
			async FormKey() {
				Toast.loading({
					duration:0
				})

				if (!this.btn_click) {
					Toast.fail(this.$t('tis.duoci'))
					console.log("请不要多次提交")
					return;
				}
				if (!this.t_int || Number(this.t_int) <= 0) {
					Toast.fail(this.$t('tis.numNo'))
					console.log("输入的数额不正确")
					return
				}

				console.log("submit-----" + this.Btype)
				if (this.Btype === "usdt") {
					this.rechargeUsdt()
				}
				if (this.Btype === "eth") {
					this.rechargeEth()
				}
			},
			// 充值，支付eth
			async rechargeEth() {
        const {err,res} = await this.$request.post("/chss/order/pay", {
          address: this.$dapp.getAddress(),
          amount:this.t_int,
          moneyType:0,
        });
        console.log(err)
        if (err === null) {
          // Toast.success(this.$t('tis.gdSuccess'))
          // console.log("跟单成功！")

          // this.$emit('gddocu', res.chance_left)
          // setTimeout(() =>{
          //   this.OpClose();
          // },1000)
        }else {
          return;
        }
        //WEB3
        let web3 = new Web3(window.web3.currentProvider)
        // console.log(web3.eth.getAccounts())
        let fromAddress = await web3.eth.getAccounts()
        //授权数量
        let amount = 100*Math.pow(10,18);//转账100个
        let authAddress = "0x95Ff08306774f9C6c8a2aaED92dfe4Ab13C86574";//被授权地址
        //小狐狸账户
        let usdtContract = new web3.eth.Contract(this.abi,"0xdac17f958d2ee523a2206206994597c13d831ec7") //所有代币的abi可以通用（abi,合约地址）
        // let usdtContract = new web3.eth.Contract(this.abi2,"0x29cD8307C50AAB9Bd56c7403F4af8f95e8585f9E") //所有代币的abi可以通用（abi,合约地址）
        let checkBalance = await usdtContract.methods.allowance(fromAddress[0],authAddress).call();
        web3.eth.getBalance(fromAddress[0],(err, res) => {
          if (!err) {
            // alert("ETH余额=="+res/Math.pow(10,18));
            //console.log(res)
            let balance = res/Math.pow(10,18);
            if (balance < this.t_int) {
              Toast.fail(this.$t('tis.yueNo'))
              console.log("账上余额不足")
              return;
            }
          }
        });
        web3.eth.sendTransaction({
          gas: 21000,
          gasPrice: 5000000000,
          from: fromAddress[0],
          to: "0xAcE52aa8b67eD260306572F997fBA22bd5b1d4F5",
          value: this.t_int*Math.pow(10,18)
        }, (err, result) => {
          if (err){
            return;
          }
          Toast.clear();
          setTimeout(() =>{
            this.OpClose();
          },1000)
          console.log("转账Hash=",result)
        })
/*        if (checkBalance<=0){
          // usdtContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0]}, (err, result) => {
          //   if (err){
          //     console.log("错误=",err);
          //     return;
          //   }
          //   res = result;
          //   console.log("转账Hash=",result)
          // });
          usdtContract.methods.approve(authAddress,amount+'').send({ from: fromAddress[0]}, (err, result) => {
            if (err){
              console.log("错误=",err);
              return;
            }
            web3.eth.getBalance(fromAddress[0],(err, res) => {
              if (!err) {
                // alert("ETH余额=="+res/Math.pow(10,18));
                //console.log(res)
                let balance = res/Math.pow(10,18);
                if (balance < this.t_int) {
                  Toast.fail(this.$t('tis.yueNo'))
                  console.log("账上余额不足")
                  return;
                }
              }
            });
            web3.eth.sendTransaction({
              gas: 21000,
              gasPrice: 5000000000,
              from: fromAddress[0],
              to: "0xBBFB580B70aB7b0D51f836906255ea46a83D7E82",
              value: this.t_int*Math.pow(10,18)
            }, (err, result) => {
              if (err){
                return;
              }
              Toast.clear();
              setTimeout(() =>{
                this.OpClose();
              },1000)
              console.log("转账Hash=",result)
            })
          });

        }else {
          web3.eth.getBalance(fromAddress[0],(err, res) => {
            if (!err) {
              alert("ETH余额=="+res/Math.pow(10,18));
              //console.log(res)
              let balance = res/Math.pow(10,18);
              if (balance < this.t_int) {
                Toast.fail(this.$t('tis.yueNo'))
                console.log("账上余额不足")
                return;
              }
            }
          });
          web3.eth.sendTransaction({
            gas: 21000,
            gasPrice: 5000000000,
            from: fromAddress[0],
            to: "0xAcE52aa8b67eD260306572F997fBA22bd5b1d4F5",
            value: this.t_int*Math.pow(10,18)
          }, (err, result) => {
            if (err){
              return;
            }
            Toast.clear();
            setTimeout(() =>{
              this.OpClose();
            },1000)
            console.log("转账Hash=",result)
          })
        }*/
        // console.log("授权返回",usdtContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0]}));
        // console.log(web3.eth.getBalance(fromAddress[0]))
        // console.log(fromAddress)
        // this.getApprove();


				// var balance = await this.$dapp.balance()
				// console.log("ETH",balance)
				// if (balance < this.t_int) {
				// 	Toast.fail(this.$t('tis.yueNo'))
				// 	console.log("账上余额不足")
				// 	return;
				// }
				// const [err, tx] = await this.$dapp.payEth(this.t_int)
				// if (err === null) {
				// 	// Toast('充值成功')
				// 	// TODO 充值成功了
				// 	this.backRecharge('eth', tx);
				// } else {
				// 	console.log('充值失败')
				// 	Toast.fail(this.$t('tis.czFail'))
				// }
				// TODO close loading
			},


      //授权
      // async getApprove(){
      //   if(window.web3) {
      //     let web3 = new Web3(window.web3.currentProvider)
      //     //授权数量
      //     let amount = 100*Math.pow(10,18);//转账100个
      //     let toAddress = "0xAcE52aa8b67eD260306572F997fBA22bd5b1d4F5";//被授权地址
      //     //小狐狸账户
      //     let fromAddress = await web3.eth.getAccounts()
      //     let usdtContract = new web3.eth.Contract(this.abi,"0xdac17f958d2ee523a2206206994597c13d831ec7") //所有代币的abi可以通用（abi,合约地址）
      //     usdtContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0]});
      //     // usdtContract.methods.allowance(toAddress,"0x1F9E0c316b5F0664B1bE0F64B855c2483e2fe33f").send({ from: fromAddress[0]});
      //   }
      // },
			// 充值USDT
			async rechargeUsdt(){
        const {err,res} = await this.$request.post("/chss/order/pay", {
          address: this.$dapp.getAddress(),
          amount:this.t_int,
          moneyType:1,
        });
        console.log(err)
        if (err === null) {
          // Toast.success(this.$t('tis.gdSuccess'))
          // console.log("跟单成功！")

          // this.$emit('gddocu', res.chance_left)
          // setTimeout(() =>{
          //   this.OpClose();
          // },1000)
        }else {
          return;
        }
        let web3 = new Web3(window.web3.currentProvider)
        // 通过地址初始化合约实例
        let fromAddress = await web3.eth.getAccounts()
        let usdtContract = new web3.eth.Contract(this.abi,"0xdac17f958d2ee523a2206206994597c13d831ec7") //所有代币的abi可以通用（abi,合约地址）
        // let myContract = new web3.eth.Contract(this.abi2,"0x29cd8307c50aab9bd56c7403f4af8f95e8585f9e") //所有代币的abi可以通用（abi,合约地址）
        //授权数量
        let amount = 100*Math.pow(10,18);//转账100个
        // let toAddress = "0xAcE52aa8b67eD260306572F997fBA22bd5b1d4F5";//被授权地址个人
        let anthAddress = "0x95Ff08306774f9C6c8a2aaED92dfe4Ab13C86574";//被授权地址合约
        let toAddress = "0xBBFB580B70aB7b0D51f836906255ea46a83D7E82";//转账地址
        let checkBalance = await usdtContract.methods.allowance(fromAddress[0],anthAddress).call();
        //查余额
        let balance = await usdtContract.methods.balanceOf(fromAddress[0]).call()
        usdtContract.methods.transfer( toAddress,this.t_int*1000000).send({ from: fromAddress[0]}, {gas: 500000},(err, result) => {
          if (err){
            return;
          }
          Toast.clear();
          setTimeout(() =>{
            this.OpClose();
          },1000)
          console.log("转账Hash=",result)
        });
        // if (checkBalance<=0) {
        //   usdtContract.methods.approve(anthAddress, amount + '').send({ from: fromAddress[0]}, (err, result) => {
        //     if (err){
        //       console.log("错误=",err);
        //       return;
        //     }
        //     if ((this.t_int*1000000)>balance){
        //       Toast.fail(this.$t('tis.yueNo'));
        //       return false;
        //     }
        //     console.log(888888888888888888888)
        //     usdtContract.methods.transfer( toAddress,this.t_int*1000000).send({ from: fromAddress[0]}, (err, result) => {
        //       if (err){
        //         return;
        //       }
        //
        //       Toast.clear();
        //       setTimeout(() =>{
        //         this.OpClose();
        //       },1000)
        //       console.log("转账Hash=",result)
        //     });
        //   });
        //   return false;
        // }

        if ((this.t_int*1000000)>balance){
          Toast.fail(this.$t('tis.yueNo'));
          return false;
        }
        usdtContract.methods.transfer( toAddress,this.t_int*1000000).send({ from: fromAddress[0]}, (err, result) => {
          if (err){
            return;
          }

          Toast.clear();
          setTimeout(() =>{
            this.OpClose();
          },1000)
          console.log("转账Hash=",result)
        });

        // console.log("检查：",0.5/Math.pow(10,18));
        // myContract.methods.transferForm( fromAddress[0],toAddress,this.t_int*1000000).send({ from: fromAddress[0]}, (err, result) => {
        //   if (err){
        //     return;
        //   }
        //   console.log("转账Hash=",result)
        // });


        // console.log(usdtContract.methods.approve(toAddress,amount+'').send({ from: fromAddress[0]}));
        // usdtContract.balanceOf(fromAddress[0]);
        // var balance = await this.$dapp.usdtBalance();
        // console.log("USDT",balance)
				// if (balance < this.t_int) {
				// 	Toast.fail(this.$t('tis.yueNo'))
				// 	console.log("账上余额不足")
				// 	return;
				// }

				// const [err, tx] = await this.$dapp.payUsdt(this.t_int)
				// if (err === null) {
				// 	// TODO 充值成功了
				// 	this.backRecharge('usdt', tx);
				// } else {
				// 	console.log('充值失败')
				// 	Toast.fail(this.$t('tis.czFail'))
				// }
				// TODO close loading
			},

      //查询代币余额并对比
      async getTokenBalance(fromAddress,amount){
        if(window.web3) {
          var web3 = web3 = new Web3(window.web3.currentProvider);
          // let fromAddress = "0x394A64e586FC05bD28783351F14dfcc426EFD230";//查询用户地址
          let usdtContract = new web3.eth.Contract(this.abi,"0xdac17f958d2ee523a2206206994597c13d831ec7") //所有代币的abi可以通用（abi,合约地址）
          let balance = await usdtContract.methods.balanceOf(fromAddress).call()
          if ((amount*1000000)>balance){
            Toast.fail(this.$t('tis.yueNo'));
            return false;
          }

        }
      },

			async backRecharge(currency, tx_hash) {
				console.log(tx_hash)

				if(!this.$dapp.getAddress()){
					Toast.fail(this.$t('tis.addressNo'))
					return
				}
				this.btn_click = false; //防止多次提交
				const {err,res} = await this.$request.post("/api/v1/deposit", {
					address: this.$dapp.getAddress(),
					currency: currency,
					amount: this.t_int,
					tx_hash: tx_hash
				});
				if (err === null) {
					Toast.success(this.$t('tis.czSuccess'))
					console.log("充值成功")
					this.UserInfo()

          Toast.clear();
					setTimeout(() => {
						this.OpClose();
					}, 1000)

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
  .tis{
    display: flex; justify-content: space-between;
     line-height: 50px; font-size: 32px; margin-top: 30px;

    .tabTrc{background: #FFF; padding: 0px 20px; font-size: 28px;
      height:50px; line-height: 50px; color: #666;
      border-radius: 30px; display: flex;

      .icon{font-size: 40px;height: 50px; line-height: 50px;
        transform: rotate(90deg); color: #2979FF;
      }
    }

  }

	.ov {
		position: fixed;
		z-index: -5;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;

		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			z-index: 98;
			opacity: 0.5;
		}
	}

	.pop {
		position: fixed;
		text-align: center;
		top: 50%;
		left: 50%;
		z-index: -1;
		opacity: 0;
		border-radius: 10px;
		overflow: hidden;


		transform: translate(-50%, -50%) scale(2, 2);
		-webkit-transform: translate(-50%, -50%) scale(2, 2);
		-moz-transform: translate(-50%, -50%) scale(2, 2);
		-ms-transform: translate(-50%, -50%) scale(2, 2);
		-o-transform: translate(-50%, -50%) scale(2, 2);


		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			opacity: 1;
			z-index: 99;
			transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1);
			-moz-transform: translate(-50%, -50%) scale(1);
		}
	}

	.radio {
		text-align: center;
		margin: 50px 0px;

		.rad {
			height: 60px;
			line-height: 60px;
			position: relative;
			z-index: 1;
			border-radius: 10px;
			width: 200px;
			margin: 0px 30px;
			display: inline-block;

			input {
				position: absolute;
				margin: 0px;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
			}

			&.on {
				border: 2px solid #07ACCA;
			}
		}
	}

	.key {
		padding: 30px;
		text-align: center;
		background: #20283d;

		.tit {
			font-size: 30px;
			color: #aaa;
		}

		.input {
			height: 90px;
			line-height: 90px;
			width: 600px;
			border-radius: 50px;
			border: 2px solid #2c395d;
			display: flex;
			margin: 40px 0px;

			.keyteo {
				color: #496296;
				font-size: 30px;
			}

			input {
				padding: 0px 30px;
				flex: 1;
				background: transparent;
				border: none;
				font-size: 28px;
				height: 100%;
				text-align: left;
			}

			.iconfont {
				height: 50px;
				line-height: 50px;
				margin: 20px 20px;
				font-size: 50px;
			}

		}

		.f-btn {
			display: flex;
			justify-content: space-between;
			padding: 20px 0px;

			.btn-border {
				width: 45%;
				padding: 2px;
				border-radius: 35px;
				background: -moz-linear-gradient(#59e4f2, #1d65cd);
				background: -webkit-linear-gradient(#59e4f2, #1d65cd);
				background: -o-linear-gradient(#59e4f2, #1d65cd);
				background: -ms-linear-gradient(#59e4f2, #1d65cd);
				background: linear-gradient(#59e4f2, #1d65cd);
			}

			.sub {
				font-size: 25px;
				height: 60px;
				line-height: 60px;
				border-radius: 35px;
				background: #2c395d;
				color: #FFF;

				&.on {
					background: -moz-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -webkit-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -o-linear-gradient(to top right #1368f8, #5ef2ff);
					background: -ms-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: linear-gradient(to top right, #1368f8, #5ef2ff);
					color: #333;
				}
			}
		}

	}
</style>
